<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <van-card v-for="v in list" :key="v.id" :price="v.price.toFixed(2)" :desc="v.word" :title="v.title"
          :thumb="v.images[0]" @click="router.push(`/detail/${v.id}`)">
          <template #num>
            <span>{{ numberToSell(v.sell) }}</span>
          </template>
        </van-card>

      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import { ListRawState } from '@/types';
import axios from 'axios';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { numberToSell } from '@/utils/tools'

const router = useRouter()
const _page = ref(1);
const loading = ref(false);
const finished = ref(false);

const list = ref<ListRawState[]>([]);
const refreshing = ref(false)

const onRefresh = async () => {
  _page.value = 1;
  await getList()
  refreshing.value = false
}

const getList = async () => {
  const resp = await axios.get('/api/list', { params: { _page: _page.value } });
  const { data, headers } = resp;
  if (_page.value === 1) {
    list.value = data
  } else {
    list.value = list.value.concat(data);
  }
  _page.value++
  loading.value = false
  if (headers['x-total-count'] <= list.value.length) {
    finished.value = true
  }
}

</script>